<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><{$tpl_title}><{T w='Content Management System'}></title>
<link href="<{$smarty.const.BASEPATH}>/css/base.css" rel="stylesheet"/>
<link href="<{$smarty.const.BASEPATH}>/css/admin_style.css" rel="stylesheet"/>
<link href="<{$smarty.const.BASEPATH}>/css/css.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="<{$smarty.const.WEBDIR}>js/jquery.min.js"></script>
<script type="text/javascript" src="<{$smarty.const.WEBDIR}>js/cropzoom/js/jquery-ui-1.8.2.custom.js"></script>
<script type="text/javascript" src="<{$smarty.const.WEBDIR}>js/cropzoom/js/jquery.cropzoom.js"></script>
<link href="<{$smarty.const.WEBDIR}>js/cropzoom/css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
<link href="<{$smarty.const.WEBDIR}>js/cropzoom/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 

        <style type="text/css">
        #zoom,#rot{
            width:360px;
            margin:auto;
            height:25px;
        }
        #crop_container,#crop_container2{
        float:left;
        }
        .result,.result2{
    float:left;
    margin:0 0 0 10px;
    border:1px solid #333;
    width:auto;
    height:430px;
    overflow: hidden;
}
.txt{
    width:230px;
    margin:75px auto 0 auto;
    
}
.button-wrapper a{
	font-size: 14px;
	text-decoration: none;
	line-height: 20px;
	padding: 10px;
	background-color: #0099CC;
	font-weight: bold;
	font-family: 宋体, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
.button-wrapper a:hover{
	background-color: #333333;
}


    </style>
    <script type="text/javascript">
    $(document).ready(function(){
 
        
       var cropzoom2 = $('#crop_container2').cropzoom({
            width:700,
            height:430,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            expose:{
                //slidersOrientation: 'horizontal',
                //zoomElement: '#zoom',
                //rotationElement: '#rot',
                //elementMovement:'#movement'
            },
            selector:{
           	w:<{$cropw}>,
            h:<{$croph}>,        
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow',
              startWithOverlay: true,
              hideOverlayOnDragAndResize: true              
            },
            image:{
                source:'<{$pic}>',
                width:<{$width}>,
                height:<{$height}>,
                minZoom:10,
                maxZoom:200,
                startZoom:100,
                useStartZoomAsMinZoom:true,
                snapToContainer:true
            }
        });
        $('#restore2').click(function(){
            cropzoom2.restore();
        });
        //cropzoom2.setSelector(45,45,200,150,true);
        $('#crop2').click(function(){ 
            cropzoom2.send('resize_and_crop.php','POST',{},function(rta){
                $('#result_image').find('img').remove();
                var img = $('<img />').attr('src','upload/'+rta+'?tmp='+Date.parse(new Date()));
                $('#result_image').append(img);
                //window.parent.document.getElementById('imagesmall').value=rta;
                window.parent.document.getElementById('viewimg').src='upload/'+rta+'?tmp='+Date.parse(new Date());
                //window.parent.document.getElementById('allimg').value+='|'+rta;
				window.parent.insertUpload2(rta);
                var truthBeTold=confirm("切图成功！点确认关闭，否则点取消!");
                if (truthBeTold) {
                window.parent.document.getElementById('jtdiv').style.display='none';
                } 
                
            });
        });
        
    });
</script>
<style type="text/css">
	#img_to_crop{
		-webkit-user-drag: element;
		-webkit-user-select: none;
	}
</style>


</head>

<body>

<div class="PostContent">
                                              <div class="boxes">
                                              <div id="crop_container"></div>
                                                  <div id="crop_container2"></div>
                                                  <div class="result2">
                                                        <div id="result_image"></div>  
                                                  </div> 
                                                  <div class="cleared"></div> <br />
                                                  <span class="button-wrapper" id="restore2">
                                                    
                                                    <a class="button" href="javascript:void(0)">重置</a>
                                              </span><br /><br />
                                              <span class="button-wrapper" id="crop2">
                                                    
                                                    <a class="button" href="javascript:void(0)">切图</a>
                                              </span><br /><br />
                                              <span class="button-wrapper" id="crop3">
                                                    
                                                    <a class="button" href="javascript:window.parent.document.getElementById('jtdiv').style.display='none';">关闭</a>
                                              </span>
                                              </div>  
                                    </div>
</body>

</html>